<template>
  <div class="shoplist_container">
    <head-top head-title="我的购买" go-back="true"></head-top>

    <ul class="orderLists">
      <router-link
        :to="{path: '', query:{}}"
        v-for="item in list"
        tag="li"
        :key="item.id"
        class="shop_li"
      >
        <section>
          <img :src="item.goods.goodsImage" class="shop_img" />
        </section>
        <hgroup class="shop_right">
          <header class="shop_detail_header">
            <h4 class="shop_title ellipsis">{{item.goods.goodsName}}</h4>
          </header>
          <h5 class="rating_order_num">
            <section class="rating_order_num_left">
              <section class="rating_section">
               <s class="rating_num1">{{item.goods.goodsPrice}}￥</s>
                <span class="rating_num">{{item.indent.price}}￥</span>
              </section>
              <section class="order_section">卖家：{{item.goods.createPerson}}</section>
             
            </section>
          </h5>
          <h5 class="fee_distance">
            <p class="distance_time">
               <span class="rating_num">购买时间：</span>
              <span class="order_time">{{item.indent.createTime}}</span>
            </p>
          </h5>
        </hgroup>
      </router-link>
    </ul>

    <foot-guide></foot-guide>
  </div>
</template> 
<script>
import headTop from "src/components/header/head";
import { imgBaseUrl } from "src/config/env";
import footGuide from "src/components/footer/footGuide";

export default {
  components: {
    headTop,

    footGuide
  },
  data: function() {
    return {
      list: [], //列表
      listLoading: true,
      reply: [],
      imgBaseUrl
    };
  },
  mounted: function() {
    var vm = this;
    var userId = sessionStorage.getItem("userId");
    console.log(userId);
    this.axios({
      method: "get",
      url: "http://172.16.9.15:8082/CustomerFeign/MyBuy",
      params: {
        client: userId,
        status: 1,
        page: 1,
        size: 5
      }
    }).then(function(res) {
      console.log(res.data.data.row);
      vm.list = res.data.data.row;
    });
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
.orderLists {
  margin-top: 45px;
}
.shoplist_container {
  background-color: #fff;
  margin-bottom: 2rem;
}
.shop_li {
  display: flex;
  border-bottom: 0.025rem solid #f1f1f1;
  padding: 0.6rem 0.4rem;
}
.shop_img {
  @include wh(2.7rem, 2.7rem);
  display: block;
  margin-right: 0.4rem;
}
.list_back_li {
  height: 4.85rem;
  .list_back_svg {
    @include wh(100%, 100%);
  }
}
.shop_right {
  flex: auto;
  .shop_detail_header {
    @include fj;
    align-items: center;
    .shop_title {
      width: 8.5rem;
      color: #333;
      padding-top: 0.01rem;
      @include font(0.65rem, 0.65rem, "PingFangSC-Regular");
      font-weight: 700;
    }
    .premium::before {
      content: "品牌";
      display: inline-block;
      font-size: 0.5rem;
      line-height: 0.6rem;
      color: #333;
      background-color: #ffd930;
      padding: 0 0.1rem;
      border-radius: 0.1rem;
      margin-right: 0.2rem;
    }
    .shop_detail_ul {
      display: flex;
      transform: scale(0.8);
      margin-right: -0.3rem;
      .supports {
        @include sc(0.5rem, #999);
        border: 0.025rem solid #f1f1f1;
        padding: 0 0.04rem;
        border-radius: 0.08rem;
        margin-left: 0.05rem;
      }
    }
  }
  .rating_order_num {
    @include fj(space-between);
    height: 0.6rem;
    margin-top: 0.5rem;
    .rating_order_num_left {
      @include fj(flex-start);
      .rating_section {
        display: flex;
        .rating_num {
          @include sc(0.6rem, #ff6000);
          margin: 0 0.1rem;
        }
         .rating_num1 {
          @include sc(0.6rem, #050200);
          margin: 0 0.1rem;

        }
      }
      .order_section {
        transform: scale(0.8);
        margin-left: 0.2rem;
        @include sc(0.7rem, #666);
      }
    }
    .rating_order_num_right {
      display: flex;
      align-items: center;
      transform: scale(0.7);
      min-width: 5rem;
      justify-content: flex-end;
      margin-right: -0.8rem;
      .delivery_style {
        font-size: 0.4rem;
        padding: 0.04rem 0.08rem 0;
        border-radius: 0.08rem;
        margin-left: 0.08rem;
        border: 1px;
      }
      .delivery_left {
        color: #fff;
        background-color: $blue;
        border: 0.025rem solid $blue;
      }
      .delivery_right {
        color: $blue;
        border: 0.025rem solid $blue;
      }
    }
  }
  .fee_distance {
    margin-top: 0.52rem;
    @include fj;
    @include sc(0.5rem, #333);
    .fee {
      transform: scale(0.9);
      @include sc(0.5rem, #666);
    }
    .distance_time {
      transform: scale(0.9);
      span {
        color: #999;
      }
      .order_time {
        color: $blue;
      }
      .order_time1 {
        color: red;
        margin-left: 200px;
      }
      .order_time2 {
        color: green;
      }
      .segmentation {
        color: #ccc;
      }
    }
  }
}
</style>
